<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>	
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>	
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css">
<title>八维贴吧</title>
</head>
<script type="text/javascript">
   $(function(){//初始省
	   selectCitys(1,"province.id");
   });
   
   function  selectCitys(pid,zjwz){//pid 父级id ，zjwz：查询的结果追加的位置
	  //清除以前数据
	  $("[name='county.id']").html("<option value=''>--请选择--</option>")
	  if(zjwz == 'city.id'){
		  $("[name='city.id']").html("<option value=''>--请选择--</option>")
	  }
	   //三级联动查询
	   $.post(
			   "selectCitys",
			   {'pid':pid},
			   function(obj){
		        for ( var i in obj) {
					$("[name='"+zjwz+"']").append("<option value='"+obj[i].id+"'>"+obj[i].name+"</option>")
				}
	   			},"json")
    }

</script>


<body>
  <!-- 包含header.jsp -->
  <jsp:include page="/WEB-INF/view/common/header.jsp"/>
  
  <!-- ///////////////////////////////自己开发部分中间部分开始/////////////////////////// -->
  
    <div class="container">
        <div class="row">
                    <div class="card" style="background-color: white">
                        <div class="card-header">
                            <b>欢迎注册</b>
                        </div>
                        <div class="card-body" style="display: flex">
                            <div class="col3">&nbsp;</div>
                            <div class="col6">
                                <form:form modelAttribute="user" id="userForm" action="${pageContext.request.contextPath}/register" method="post" enctype="multipart/form-data" >
                                    <table class="table-borderless">
                                        <tbody><tr><td width="30%"> </td><td><span style="color: red">
                                          <form:errors path="*"></form:errors>
                                        </span></td></tr>
                                        <input type="hidden" name="oldPassword" value="123456"> <!-- 为了jsr证验证通过 此处没有具体的功能 -->
                                        <tr><td align="right">　　用户名</td><td><form:input  path="userName"/></td></tr>
                                        <tr><td align="right">　　　密码</td><td><form:password  path="password"/></td></tr>
                                        <tr><td align="right">　确认密码</td><td><form:password path="repassword" /></td></tr>
                                        <tr><td align="right">　头像</td><td><input type="file" name="file" onchange="upFile(this)">
                                        <span id="sp"></span>
                                        </td></tr>
                                        <tr><td align="right">　生日：</td><td><form:input path="birthday" type="date"/></td></tr>
                                        <tr><td align="right">　性别：</td><td><form:radiobutton path="gender" value="MALE"  label="男"  checked='checked' /><form:radiobutton path="gender" value="FEMALE"  label="女" /></td></tr>
                                        <tr><td align="right">　省</td><td><select name="province.id" onchange="selectCitys(this.value,'city.id')"><option value="">--请选择--</option></select></td></tr>
                                        <tr><td align="right">　市</td><td><select name="city.id" onchange="selectCitys(this.value,'county.id')"><option value="">--请选择--</option></select></td></tr>
                                        <tr><td align="right">　县</td><td><select name="county.id"><option value="">--请选择--</option></select></td></tr>
                               
                                        <tr><td> </td><td><button class="btn btn-danger">注册</button></td></tr>
                                    </tbody></table>
                                </form:form>
                            </div>
                            <div class="col3">&nbsp;</div>
                        </div>
                    </div>
            </div>
        </div>
    
    <br/>
    <br/>
    <br/>
  
  
  
  
  <!-- ///////////////////////////////自己开发部分中间部分开始/////////////////////////// -->
  
  <!-- jsp包含尾部footer.jsp -->
  <jsp:include page="/WEB-INF/view/common/footer.jsp"/>
<script>
    function upFile(obj){

        var formData = new FormData();
        formData.append("file",obj.files[0]);
        $.ajax({
            type:"post",
            url:"/register/upFile",
            data:formData,
            processData: false,
            contentType:false,
            success:function(url){
                if(url!=null){
                     alert(url);
                     $("#sp").empty();
                     $("#sp").append("<img src='"+url+"' width='60px' height='80px'>");
                     $("#sp").append("<input type='text' name='imgurl' value='"+url+"'>");
                }
            }
        })
    }
</script>
</body>
</html>